<template>
	<view v-if="is_show">
		<view class="head">
			<view class="" :style="{'height':  statusBarHeight+'px'}"></view>
			<view class="head__on" :style="{'width':windowWidth+'px','height':  naviBarHeight+'px'}">
				<view class="head__on__img" @click="toBack">
					<image src="/static/icon/fanhui.png" style="width: 35rpx;height: 35rpx;" mode=""></image>
				</view>
				<view style="font-size: 32rpx;color: #000000;">处理详情</view>
			</view>
		</view>
		<view class="" :style="{'height': Number(statusBarHeight + naviBarHeight)+'px'}"></view>



		<scroll-view scroll-x="false" scroll-y="true" style="width: 99.3% !important;" :style="'height:'+ Number(windowHeight -  Number(statusBarHeight + naviBarHeight))+'px'">
			<view class="scroll_view_item">
				<view class="scroll_view_item__title">
					上报单位：
				</view>
				<input class="text-oneline scroll_view_item__content" v-model="report_param.depName" disabled="true" value="" type="text" />
			</view>
			<view class="scroll_view_item">

				<view class="scroll_view_item__title">
					上报时间：
				</view>
				<input class="text-oneline scroll_view_item__content" disabled="disabled" type="text" :value="report_param.time" />
			</view>
			<view class="scroll_view_item">
				<view class="scroll_view_item__title">
					上报人：<text style="opacity: 0;">站</text>
				</view>
				<input class="text-oneline scroll_view_item__content" type="text" disabled="true" value="" v-model="report_param.depUserName" />
			</view>
			<view class="scroll_view_item">
				<view class="scroll_view_item__title">
					上报标题：
				</view>

				<input class="text-oneline scroll_view_item__content" v-model="report_param.title" disabled="true" type="text"
				 value="" />
			</view>
			<view class="scroll_view_item" style="align-items: flex-start;flex-direction: column;">
				<view class="scroll_view_item__title">
					上报内容：
				</view>
				<view class="" style="flex: 1;">
					<textarea style="flex: 1;background: #f8f8f8;margin-top: 24rpx;font-size: 28rpx;padding: 20rpx;" maxlength="180"
					 v-model="report_param.context" disabled="true" />

					</view>
				
			</view>
			<view class="scroll_view_item" style="align-items:flex-start;flex-wrap: wrap;">
				<view class="scroll_view_item__title">
					图片：<text style="opacity: 0;">站位</text>
				</view>
				<view class="" style="flex: 1;flex-wrap: wrap;display: flex;justify-content:  flex-start;">	
					<image @click.stop="previewImage(item)" v-for="(item,index) in img_list" :key="index" :src="item"   style="width: 134rpx;height: 134rpx;margin-bottom: 20rpx;margin-right: 6rpx;" mode="aspectFill"></image>
				</view>


			</view>
			<view class="scroll_view_item" style="align-items:flex-start;flex-wrap: wrap;" v-if="Number(report_status) == 3">
				<view class="scroll_view_item__title" >
					处理图片：
				</view>
				<view class="" style="flex: 1;flex-wrap: wrap;display: flex;justify-content:  flex-start;">
					<image @click.stop="previewImage(item)" v-for="(item,index) in fin_pic_list" :key="index" :src="item"   style="width: 134rpx;height: 134rpx;margin-bottom: 20rpx;margin-right: 6rpx;" mode="aspectFill"></image>
				</view>
			</view>
			<view class="scroll_view_item">
				<view class="scroll_view_item__title">
					处理过程：
				</view>
				<y-steps :stepList="step_list">
				</y-steps>

			</view>

			<view class="scroll_view_item"  v-if="Number(report_status) == 3">
				<view class="scroll_view_item__title">
					处理结果：
				</view>
				<view class="scroll_view_item__content" style="text-align: left;margin-left: 0rpx;">
					{{results_text}}
				</view>

			</view>


			<view class="scroll_view_item" v-if="Number(report_status) == 2">
				<view class="scroll_view_item__title">
					驳回原因：
				</view>
				<view class="scroll_view_item__content" style="text-align: left;margin-left: 0rpx;">
					{{dismiss_text}}
				</view>

			</view>

			<view class="yes" v-if="Number(report_status) != 1" >
				<view @click="toBack" class="yes__on">
					确定
				</view>
		
			</view>
			
			
			<view class="dispose" v-if="Number(report_status) == 1" >
				<view @click="openDispose" v-if="isMajor == 1"  class="dispose__str">
					处理
				</view>
				<view class="" style="width: 100rpx;" v-if="isMajor == 1">
					
				</view>
				<view @click="openReject" class="dispose__str">
					驳回
				</view>
			</view>
		</scroll-view>







		<view class="bottom" v-if="dispose_show">
			<view class="bottom__box">
				<view class="bottom__box__head">
					处理
				</view>
				<view class="bottom__box__content">
					<view class="bottom__box__content__text">
						处理图片：
					</view>
					<view class="bottom__box__content__boom" style="width: 100%;">
						<image src="/static/icon/shangbao_icon_camera.png" @click="openSelectBox" style="width: 134rpx;height: 134rpx;margin-bottom: 20rpx;margin-right: 6rpx;" mode=""></image>
						<view class="bottom__box__content__boom__img" style="position: relative;">
		<!-- 					<view class="" style="">
		
								
							</view> -->
<!-- 							<image @click.stop="previewImage(item)" v-for="(item,index) in disposerep_img_list" :key="index" :src="item"   style="width: 134rpx;height: 134rpx;margin-bottom: 20rpx;margin-right: 6rpx;" mode="aspectFill"></image>		 -->
												<!-- flex: 1;-webkit-overflow-scrolling :touch; overflow-y: hidden; overflow-x: auto;white-space: nowrap;						 -->
								<view class="" v-for="(item,index) in disposerep_img_list"  :key="index"  style="width: 134rpx;height: 134rpx;margin-bottom: 20rpx;margin-right: 6rpx;position: relative;display: inline-block;">
									<image  style="width: 100%;height: 100%;" :src="item"   mode="aspectFill"></image>
									<image @click="removeImg(index)" src="/static/icon/remove.png" style="position: absolute;right: -5rpx;top: -5rpx;width: 40rpx;height: 40rpx;" mode=""></image>
								</view>
																		
																		
						</view>

					</view>
				</view>
				<view class="bottom__box__content">
					<view class="bottom__box__content__text">
						处理结果：
					</view>
					<textarea value="" placeholder="请输入" v-model="disposerep_text" style="width: 100%;padding: 20rpx;background: #f8f8f8;border-radius: 10px;" />
				</view>
				<view class="bottom__box__buttom">
					<view class="bottom__box__buttom__no" @click="openDispose">
						取消
					</view>
					<view class="bottom__box__buttom__yes" @click="dispose" >
						确定
					</view>
				</view>

			</view>
		</view>
		

		
		<view class="bottom" v-if="reject_show">
					<view class="bottom__box">
						<view class="bottom__box__head">
							驳回
						</view>

						<view class="bottom__box__content">
							<view class="bottom__box__content__text">
								驳回原因：
							</view>
							<textarea value="" placeholder="请输入" v-model="rebut_text" style="width: 100%;padding: 20rpx;background: #f8f8f8;border-radius: 10px;" />
						</view>
						<view class="bottom__box__buttom">
					
			
							<view class="bottom__box__buttom__no" @click="openReject">
								取消
							</view>
							<view class="bottom__box__buttom__yes" @click="reject" >
								确定
							</view>
						</view>
		
					</view>
		</view>
		
		<view v-if="is_tan" class="pai" style="">
			<view class="pai__box" style="">
				<view class="pai__box__content" style="">
					<!-- <view class="pictureModal-unit" @click="addvideo">
						拍摄
					</view>
					<view class="" style="height:2rpx;width: 100%;background-color: rgba(247, 247, 247, 1);">
							
					</view> -->
					<view class="pictureModal-unit" @click="addCamera">
						拍照
					</view>
					<view class="" style="height:2rpx;width: 100%;background-color: rgba(247, 247, 247, 1);">
		
					</view>
					<!-- <view class="pictureModal-unit" @click="addAlbumVideo">
						从手机相册选择视频
					</view>
					<view class="" style="height:2rpx;width: 100%;background-color: rgba(247, 247, 247, 1);">
							
					</view> -->
					<view class="pictureModal-unit" @click="uploadImg">
						从手机相册选择图片
					</view>
					<view class="" style="width:100%;height:12rpx;background:rgba(247,247,247,1);">
		
					</view>
					<view class="pictureModal-unit" @click="hideModal()">
						取消
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import YSteps from '@/components/MarsXHChang-YSteps/YSteps.vue'
	import moment from '@/utils/moment.min.js'
	export default {
		components: { YSteps },
		data() {
			return {
				is_show:false,
				windowWidth: 0, //屏幕宽度
				windowHeight: 0, //屏幕高度
				titleHeight: 0, //状态栏和导航栏的总高度
				statusBarHeight: 0, //状态栏高度
				naviBarHeight: 0, //导航栏高度

				report_id:'',//上报id
				report_status:0,
				report_param:{
					depId:'', // 部门id
					depName:'',//部门名称
					depUserName:'',//上报人
					time:'',//上报时间
					title:'', //标题
					context:'',//上报内容
					pic:'',//上报图片
				},
				
				img_list:[],
				fin_pic_list:[],
				is_tan: false,
				isMajor:0,//责任人 1 主责部门 0 是副责

				dispose_id:'',
				disposerep_dep_id:'',
				dispose_show: false,
				disposerep_img_list:[],
				disposerep_text:'',
				
				
				
				reject_show:false,
				rebut_text:'',
				step_list: [],
				
				
				results_text:'',//处理结果
				dismiss_text:'',//驳回原因
				
			};
		},
		onLoad(e) {
			let self = this;
			const res = uni.getSystemInfoSync()
			const system = res.platform
			self.statusBarHeight = res.statusBarHeight
			if (system === 'android') {
				self.titleHeight = (48 + self.statusBarHeight)
			} else if (system === 'ios') {
				self.titleHeight = (44 + self.statusBarHeight)
			}
			self.naviBarHeight = self.titleHeight - self.statusBarHeight

			self.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			self.windowWidth = uni.getSystemInfoSync().windowWidth;
			self.windowHeight = uni.getSystemInfoSync().windowHeight;



			this.report_id = e.id
			this.isMajor = e.isMajor
			this.dispose_id = e.disposeId
			this.disposerep_dep_id = e.disposerepDepId
			this.init()

		},


		methods: {
			init() {
				//上报详情
				this.$appReport.fAppReportGetReport({
					id: this.report_id
				}).then((res) => {
					var data = res.data.result
					console.log(data)
					this.report_param.depId = data.depId
					this.report_param.time = moment(data.updateTime?data.updateTime:data.createTime).format('YYYY-MM-DD')
					this.report_param.title = data.title
					this.report_param.context = data.context
					this.report_param.pic = data.pic
					if(data.pic){
						if(data.pic == ''){
							
						}else{
							this.img_list = data.pic.split(',')
						}
						
					}

					if(data.finPic){
						this.fin_pic_list = data.finPic.split(',')
					}
					
					this.report_status = data.status
					
					this.is_show = true
					
					console.log(	this.report_param)
				}).catch(err => {
					console.log(err)
				})
				//获取部门
				this.$appReport.fSysDepartGetDeps().then((res)=>{
					var data = res.data.result
					// console.log(data)
					var userInfo = uni.getStorageSync('userInfo')
					this.report_param.depUserName = userInfo.realname //获取上报人姓名
					//获取部门id和部门名称
					var filters = data.filter(val => val.orgCode == userInfo.orgCode)
					if(filters.length > 0 ){
						this.report_param.depName = filters[0].departName
					}
					this.$forceUpdate()
				})
				//处理流程
				this.$appReport.fAppReportGetRecords({
					id: this.report_id
				}).then((res) =>{
				
					var data = res.data.result
					this.step_list = data
					
					var dismissList = data.filter(val => val.handleStatus == 3)
					for(var i=0;i<dismissList.length;i++){
						this.dismiss_text = dismissList[i].handleRemarks
					}
					
					var resultsList = data.filter(val => val.handleStatus == 4)
					for(var i=0;i<resultsList.length;i++){
						this.results_text = resultsList[i].handleRemarks
					}
				}).catch(err => {
					console.log(err)
				})
			},
			toBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			openDispose(){
				this.dispose_show = !this.dispose_show
			},
			previewImage(img) {
				uni.previewImage({
					current: img, // 当前显示图片的http链接
					urls: [img] // 需要预览的图片http链接列表
				});
			},
			//处理
			dispose(){
				
				var param = {
					id:this.dispose_id,
					repDepId:this.disposerep_dep_id,
					finPic:this.disposerep_img_list.join(','),
					finContext:this.disposerep_text
				}
				console.log(param)
				this.$appReport.fAppReportHandle(param).then((res) =>{
					uni.showToast({
					    title: '处理成功',
					    duration: 2000,
						icon:'none'
					});
					this.dispose_show = false
					this.init()
				}).catch(err => {
					uni.showToast({
					    title: err.data.message,
					    duration: 2000,
						icon:'none'
					});
					console.log(err)
      			})
			},
			openReject(){
				this.reject_show = !this.reject_show
			},
			//驳回
			reject(){
				
				var param = {
					id:this.dispose_id,
					repDepId:this.disposerep_dep_id,
					rebut:this.rebut_text
				}
				console.log(param)
				this.$appReport.fAppReportRefuse(param).then((res)=>{
					console.log(res)
					uni.showToast({
					    title: '驳回成功',
					    duration: 2000,
						icon:'none'
					});
					this.reject_show = false
					this.init()
				}).catch(err => {
				console.log(err)
				if(err.data.code == 500) {
					uni.showToast({
					    title: err.data.message,
					    duration: 2000,
						icon:'none'
					});
				}
      })
			},
			openSelectBox() {
				this.is_tan = true
			},
			addCamera() {
				this.is_tan = false
				uni.chooseImage({
					count: 6 - this.img_list.length, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'], //拍照
					success:(res)=> {
						wx.showLoading({
							title: '上传中...',
							mask: false
						});
						let tempFilePaths=  res.tempFilePaths
						
						var dataList = [];
						let imgs = [];
						dataList =dataList.concat(res.tempFilePaths);
						let uploadImgStr = tempFilePaths.join(',')
						imgs = dataList.map((value, index) => {
							return {
								name: "file",
								uri: value,
								file:value,
								
							}
						})
			
						const token =  uni.getStorageSync('token');
						
						for(var i=0;i<imgs.length;i++){
							
							var arr  = []
							arr.push(imgs[i])
							uni.uploadFile({
								url:"http://111.62.218.228:18081/smp/sys/common/upload",     // 后端api接口
								files: arr, // uni.chooseImage函数调用后获取的本地文件路劲
								name:'file',     //后端通过'file'获取上传的文件对象
								header:{
									"X-Access-Token":token,
								},
								formData: {
								    'biz': 'temp',
									'file':uploadImgStr
								},
								success:(res) => {
									wx.hideLoading();
									this.disposerep_img_list.push(JSON.parse(res.data).message)
									uni.showToast({
										title: '图片上传成功',
										icon: 'none',
										duration: 2000
									})
								},
								fail:(err) =>{
									console.log(err)
									uni.showToast({
										title: '图片上传失败',
										icon: 'none',
										duration: 2000
									})
								}
							});
						}
			
			
			
					}
				});
			},
			uploadImg(){
				this.is_tan = false
				uni.chooseImage({
					count: 6 - this.img_list.length, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success:(res)=> {
						wx.showLoading({
							title: '上传中...',
							mask: false
						});
						let tempFilePaths=  res.tempFilePaths
						
						var dataList = [];
						let imgs = [];
						dataList =dataList.concat(res.tempFilePaths);
						let uploadImgStr = tempFilePaths.join(',')
						imgs = dataList.map((value, index) => {
							return {
								name: "file",
								uri: value,
								file:value,
								
							}
						})
			
						const token =  uni.getStorageSync('token');
						
						for(var i=0;i<imgs.length;i++){
							
							var arr  = []
							arr.push(imgs[i])
							uni.uploadFile({
								url:"http://111.62.218.228:18081/smp/sys/common/upload",     // 后端api接口
								files: arr, // uni.chooseImage函数调用后获取的本地文件路劲
								name:'file',     //后端通过'file'获取上传的文件对象
								header:{
									"X-Access-Token":token,
								},
								formData: {
								    'biz': 'temp',
									'file':uploadImgStr
								},
								success:(res) => {
									wx.hideLoading();
									this.disposerep_img_list.push(JSON.parse(res.data).message)
									uni.showToast({
										title: '图片上传成功',
										icon: 'none',
										duration: 2000
									})
								},
								fail:(err) =>{
									console.log(err)
									uni.showToast({
										title: '图片上传失败',
										icon: 'none',
										duration: 2000
									})
								}
							});
						}
			
			
			
					}
				});
			},
			hideModal(){
				this.is_tan = false
			},
			removeImg(index){
				this.disposerep_img_list.splice(index, 1)
				uni.showToast({
					title: '删除成功',
					icon: 'none',
					duration: 2000
				})
				this.$forceUpdate()
			}
		}
	}
</script>

<style lang="scss">
	.head {
		position: fixed;top: 0;left: 0;right: 0;background-color: #FFFFFF;border-bottom: 1px solid #f8f8f8;
		&__on {
			display: flex;align-items: center;justify-content: center;position: relative;
			&__img {
				position:absolute;left: 43rpx;height: 100%;display: flex;align-items: center;justify-content: center;font-size: 32rpx;color: #000000;
			}
		}
	}
	.text-oneline {
		display: inline-block;
		white-space: nowrap;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.scroll_view_item{
		border-bottom: 1px solid #f8f8f8;padding:30rpx;display: flex;align-items: center;
		
		&__title{
			display: inline-block;white-space: nowrap;font-size: 28rpx;
		}
		&__content{
			margin-left: 80rpx;text-align: right;font-size: 28rpx;
		}
	
	}
	.yes {
		display: flex;align-items: center;justify-content: center;margin-top: 60rpx;margin-bottom: 60rpx;
		&__on {
			font-size: 28rpx;padding: 15rpx 40rpx 15rpx 40rpx;display: flex;align-items: center;justify-content: center;border-radius: 10rpx;background-color: rgb(0,172,255);color: #FFFFFF;
		}
	}
	.dispose {
		display: flex;align-items: center;justify-content: center;margin-top: 60rpx;margin-bottom: 60rpx;
		&__str {
			padding: 15rpx 40rpx 15rpx 40rpx;display: flex;align-items: center;justify-content: center;border-radius: 10rpx;background-color: rgb(0,172,255);color: #FFFFFF;
		}
	}
	.bottom {
		background-color: rgba(0, 0, 0, 0.6);;z-index: 999;position: fixed;top: 0;bottom: 0;left: 0;right: 0;display: flex;align-items: center;justify-content: center;
		&__box {
			width: 80%;background: #ffffff;border-radius: 20px;display: flex;flex-direction: column;
			&__head {
				display: flex;flex: 1;align-items: center;justify-content: center;padding: 45rpx 0rpx;font-size: 42rpx;
			}
			&__content {
				display: flex;padding: 0 20rpx;
				&__text {
					font-size:30rpx ;color: #666666;display: inline-block;flex: 1;white-space: nowrap;
				}
				&__boom {
					display: flex;justify-content:  flex-start;overflow-x: hidden;
					&__img {
						flex: 1;-webkit-overflow-scrolling :touch; overflow-y: hidden; overflow-x: auto;white-space: nowrap;
					}
				}
			}
			&__buttom {
				display: flex;border-top: 1px solid #c0c0c0;margin-top: 45rpx;flex: 1;
				&__yes {
					flex: 1;display: flex;align-items: center;justify-content: center;padding: 25rpx;color: #3172B6;
				}
				&__no {
					flex: 1;display: flex;align-items: center;justify-content: center;color: #999999;border-right: 1px solid #C0C0C0;padding: 25rpx;
				}
			}
		}
	}
	.pai {
		position: fixed;top: 0rpx;bottom: 0px;left: 0px;right: 0px;background: rgba(0, 0, 0, 0.6);z-index: 999;
		&__box {
			position: absolute;bottom: 0rpx;left: 0;right: 0;
			&__content {
				display: flex;flex-direction:column;background-color: #FFFFFF;border-radius: 48rpx 48rpx 0px 0px;
			}
		}
	}
	.pictureModal-unit {
		width: 100%;
		text-align: center;
		font-size: 16px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 22px;
		padding: 30rpx 0rpx;
	}
</style>
